<!-- 付款申请 -->
<template>
  <view>
    <u-form
      :model="model"
      :rules="rules"
      ref="form"
      labelPosition="top"
      labelWidth="auto"
      :labelStyle="{
        fontSize: '14px',
        color: '#B2B2B2',
        lineHight: '20px',
      }"
    >
      <view class="basic-style">
        <view class="basic-title basic-border">基本信息</view>
        <u-form-item label="单据编号" prop="billNo" required>
          <u--input v-model="model.billNo" disabled />
        </u-form-item>

        <u-form-item label="申请人" prop="proposer" required>
          <h-select-person-input
            style="width: 100%"
            disabled
            v-model="model.proposer"
            placeholder="请选择申请人"
            border="surround"
            suffixIcon="arrow-down-fill"
            :suffixIconStyle="{ color: '#B2B2B2' }"
            objectField="model.proposer"
          />
        </u-form-item>
        <u-form-item label="申请部门" prop="proposerDeptId" required>
          <h-select-depart-input
            disabled
            v-model="model.proposerDeptId"
            :departName="model.proposerDeptText"
            placeholder="请选择部门"
            border="surround"
            style="width: 100%"
            suffixIcon="arrow-down-fill"
            :suffixIconStyle="{ color: '#B2B2B2' }"
            :title.sync="model.proposerDeptText"
          />
        </u-form-item>
        <u-form-item label="填报日期" prop="createTime" required>
          <u--input v-model="model.createTime" disabled />
        </u-form-item>
        <u-form-item label="费用所属团队" prop="teamId" required>
          <h-select-team-input
            :proposerDeptId="model.proposerDeptId" 
            isApi="expenseReimbursement"
            style="width: 100%"
            v-model="model.teamId"
            objectField="model.teamId"
            placeholder="请选择费用所属团队"
            border="surround"
            :tdlx="3"
            @input="selectTeam"
						suffixIcon="arrow-down-fill"
						:suffixIconStyle="{ color: '#B2B2B2' }"
          />
          <!-- @detail="handleTeamChange"
            @change="checkSwitch('teamId', null, $event)" -->
        </u-form-item>
        <u-form-item label="申请公司" prop="applicant" required>
          <h-select-company-input
            style="width: 100%"
            v-model="model.applicant"
            border="surround"
            placeholder="请选择公司"
            suffixIcon="arrow-down-fill"
            :suffixIconStyle="{ color: '#B2B2B2' }"
            objectField="model.applicant"
            @input="selectApplicant"
          />
          <!-- @change="checkSwitch('applicant', resetProject, $event)" -->
        </u-form-item>

        <u-form-item label="单据类型" prop="billCategory" required>
          <h-select-input-tag
            class="w-100"
            v-model="model.billCategory"
            objectField="model.billCategory"
            placeholder="请选择单据类型"
            border="surround"
            dictName="bill_category"
						suffixIcon="arrow-down-fill"
						:suffixIconStyle="{ color: '#B2B2B2' }"
          />
        </u-form-item>

				<u-form-item label="费用所属年度" prop="teamYear" v-if="model.teamYear=='2023'">
					<h-select-input-tag disabled style="width: 100%" dictName="tdnd_type" v-model="model.teamYear"
						placeholder="请选择费用所属年度" border="surround" suffixIcon="arrow-down-fill"
						:suffixIconStyle="{ color: '#B2B2B2' }"></h-select-input-tag>
				</u-form-item>
        <u-form-item label="本次支付（元）" prop="payAmount">
          <u--input disabled v-model="model.payAmount" placeholder="请输入本次支付" />
        </u-form-item>
      </view>

      <view class="basic-style">
        <view class="basic-title basic-border">费用信息</view>
        <u-form-item label="是否预付款" prop="isRelContract">
          <h-radio-group :disabled="itemList.length > 0 ? true : false" v-model="model.isRelContract" dictName="YES_OR_NO" />
          <!-- @change="isRelContractChange" -->
        </u-form-item>
        <view class="space-y-1 py-1" style="display: flex; justify-content: space-between">
          <u-button
            size="small"
            :disabled="itemList.length > 0 ? true : false"
            type="primary"
            @click="addForm"
            style="width: inherit; margin: inherit"
          >
            新增
          </u-button>
          <span>单位：元</span>
        </view>
        <view class="trip-form-data">
          <u-collapse>
            <u-collapse-item title="费用信息表单" v-for="(item, index) in itemList" :key="index">
              <PaymentFormInfo
                :item="item"
                :contentflag="contentflag"
                :dictOptions="dictOptions"
                :index="index"
                @edit="handleEditForm"
                @remove="handleRemoveForm"
              />
            </u-collapse-item>
          </u-collapse>
        </view>
        <u-popup :round="10" mode="bottom" :show="showFormModal" :closeOnClickOverlay="false" @close="closeFormModal" @open="openFormModal">
          <PaymentForm
            ref="dataForm"
            :index="index"
            :teamId="model.teamId"
            :companyId="model.applicant"
            :contentflag="contentflag"
            @submit="handleFormSubmit"
            @close="showFormModal = false"
          />
        </u-popup>
      </view>

      <view class="basic-style">
        <view class="basic-title basic-border">打款信息</view>
        <u-form-item label="支付方式" prop="payMode" required>
          <h-select-input-tag
            class="w-100"
            v-model="model.payMode"
            objectField="model.payMode"
            placeholder="请选择支付方式"
            border="surround"
            dictName="payment_type"
						suffixIcon="arrow-down-fill"
						:suffixIconStyle="{ color: '#B2B2B2' }"
          />
        </u-form-item>
        <u-form-item label="收款方名称" prop="payeeName" required>
					<h-select-customer-input-popup
						style="width: 100%"
						v-model="model.payeeName"
						:isFinance="true"
						commercialType="2"
						placeholder="请选择收款方名称"
						:isJudge='true'
						@onJudge='onJudge'
						suffixIcon="arrow-down-fill"
						:suffixIconStyle="{ color: '#B2B2B2' }"
						border="surround"/>
        </u-form-item>
        <template v-if="model.payMode === '1' || model.payMode === '2'">
          <u-form-item label="收款方开户行" prop="payeeBankName" required>
            <u--input v-model="model.payeeBankName" disabled placeholder="请输入收款方开户行" />
          </u-form-item>
          <u-form-item label="收款方账户" prop="payeeAccountNo" required>
            <u--input v-model="model.payeeAccountNo" disabled placeholder="请输入收款方账户" />
          </u-form-item>
					<u-form-item label="开户行联行号" prop="cnapsCode" required>
            <u--input v-model="model.cnapsCode" disabled placeholder="请输入开户行联行号" />
          </u-form-item>
        </template>
				<u-form-item label="打款附言" prop="postscript">
				  
					<!-- #ifdef H5 -->
					<u--textarea v-model="model.postscript" confirm-type="done" maxlength="500" count placeholder="请输入打款附言" />
					<!-- #endif -->
					<!-- #ifndef H5 -->
					<u--textarea v-model="model.postscript" :confirm-type="null" maxlength="500" count placeholder="请输入打款附言" />
					<!-- #endif -->
				</u-form-item>
        <u-form-item label="情况说明" prop="payRemark" required>
					<!-- #ifdef H5 -->
					<u--textarea v-model="model.payRemark" confirm-type="done" maxlength="500" count placeholder="请输入情况说明" />
					<!-- #endif -->
					<!-- #ifndef H5 -->
					<u--textarea v-model="model.payRemark" :confirm-type="null" maxlength="500" count placeholder="请输入情况说明" />
					<!-- #endif -->
        </u-form-item>
      </view>

      <view class="basic-style">
        <view class="basic-title basic-border">附件信息</view>
        <view class="py-1 space-y-1" style="width: 100%">
          <view style="color: red">提示：请等待附件上传完成，再点击保存，否则附件无法保存成功！</view>
          <h-upload-file v-model="model.attachments" :isIcon="false" />
          <file-list v-if="model.attachments" v-model="model.attachments" :isDelete="true" />
        </view>
      </view>
      <view class="space-x-1 px-1 btn_position">
        <u-button :disabled="isSubmit" type="primary" :plain="true" text="保存" @click="onDraft"></u-button>
        <u-button :disabled="isSubmit" type="primary" text="保存并提交" @click="onSubmit"></u-button>
      </view>
      <view style="height: 100rpx"></view>
    </u-form>
    <u-toast ref="uToast"></u-toast>
    <ProcessNodeConfiguration ref="processConfig" @ok="onOk"></ProcessNodeConfiguration>
  </view>
</template>

<script>
import { mapState } from 'vuex'
import moment from 'moment'
import {
  gainBillNo,
  add,
  info,
  edit,
  queryPurchaseSupplierById,
  queryRelReimbursementBillId,
  queryPurchaseContractById,
  queryProjectContractById,
} from '@/api/finance/ErpFinancePaymentSlipForm'
import { initDictOptions, filterMultiDictText } from '@/utils/JDictSelectUtil.js'
import fileList from '@/pages/synergy/components/fileList.vue'
import PaymentForm from '@/pages/finance/components/PaymentForm.vue'
import PaymentFormInfo from '@/pages/finance/components/PaymentFormInfo.vue'
// import Decimal from 'decimal.js'
import ProcessNodeConfiguration from '@/components/ProcessNodeConfiguration/ProcessNodeConfiguration.vue'
export default {
  name: 'ErpFinancePaymentSlipForm',
  components: { fileList, PaymentForm, PaymentFormInfo, ProcessNodeConfiguration },
  data() {
    return {
      dictOptions: {},
      contentflag: false,
      isSubmit: false,
      backUpApplyCompany: '',
      backUpTeamId: '',
      isReset: false,
      resetKey: '',
      basicForm: {},
      index: null,
      showFormModal: false,
      // confirmModal: false,
      loading: false,
      id: '',
      model: {
        // 基本信息 - 公用
        billNo: '',
        proposer: '',
        proposerDeptId: '',
        createTime: '',
        // 基本信息 - 非公用
        applicant: '',
        billCategory: '',
        teamId: '',
        payAmount: '',
        isRelContract: '1',
        payMode: '1',
        payeeName: '',
        payeeBankName: '',
        payeeAccountNo: '',
        cnapsCode: '',
				postscript: '',
        payRemark: '',
        // 附件
        attachments: null,
      },
      // isRelContract: '1',
      itemList: [], //信息费用单
      rules: {
        proposerDeptId: [
          {
            required: true,
            message: '请选择申请部门!',
            trigger: ['blur', 'change'],
          },
        ],
        proposer: [
          {
            required: true,
            message: '请选择申请人!',
            trigger: ['blur', 'change'],
          },
        ],
        applicant: [{ required: true, message: '请选择申请公司!', trigger: ['blur', 'change'] }],
        teamId: [{ required: true, message: '请选择费用所属团队!', trigger: ['blur', 'change'] }],
        billCategory: [{ required: true, message: '请选择单据类型!', trigger: ['blur', 'change'] }],
        createTime: [{ required: true, message: '请选择填报日期!', trigger: ['blur', 'change'] }],
        billNo: [{ required: true, message: '请输入单据编号!', trigger: ['blur', 'change'] }],
        payMode: [{ required: true, message: '请输入支付方式!', trigger: ['blur', 'change'] }],
        payeeName: [{ required: true, message: '请选择收款方名称!', trigger: ['blur', 'change'] }],
        payeeBankName: [{ required: true, message: '请输入收款方开户行!', trigger: ['blur', 'change'] }],
        payeeAccountNo: [{ required: true, message: '请输入收款方账户!', trigger: ['blur', 'change'] }],
        cnapsCode: [{ required: true, message: '请输入开户行联行号!', trigger: ['blur', 'change'] }],
        payeeContacts: [{ required: true, message: '请输入收款联系人!', trigger: ['blur', 'change'] }],
        payRemark: [{ required: true, message: '请输入情况说明!', trigger: ['blur', 'change'] }],
        payeeContactInfo: [
          { required: true, message: '请输入收款联系方式!', trigger: ['blur', 'change'] },
          {
            pattern: /^1(3\d|4[5-8]|5[0-35-9]|6[567]|7[01345-8]|8\d|9[025-9])\d{8}$/,
            message: '请输入正确的联系方式!',
            trigger: ['blur', 'change'],
          },
        ],
      },
      flowCode: 'onl_erp_finance_payment_slip',
      formUrl: '/erp/finance/payment/modules/ErpFinancePaymentSlipForm',
      formUrlMobile: '/pages/synergy/erpFinancePaymentSlipList',
      processId: '1527483671239512065',
      beanName: 'erpFinancePaymentSlipServiceImpl',
    }
  },
  onLoad({ id }) {
    this.id = id || ''
  },
  created() {
    if (this.id) {
      this.initInfo()
    } else {
      this.initForm()
      this.initBillNo()
    }
    this.initDictConfig()
  },
  computed: {
    ...mapState(['userInfo']),
  },
  methods: {
    //加载数据字典信息
    initDictConfig() {
      initDictOptions('erp_finance_reimbursement_bill,bill_no,id').then((res) => {
        if (res.success) {
          this.$set(this.dictOptions, 'relReimbursementBillId', res.result)
        }
      })
      initDictOptions('erp_omc_team_manager,alias_name,id').then((res) => {
        if (res.success) {
          this.$set(this.dictOptions, 'teamId', res.result)
        }
      })
      initDictOptions('contract_type').then((res) => {
        if (res.success) {
          this.$set(this.dictOptions, 'contractType', res.result)
        }
      })
      // initDictOptions('payment_expense_category').then((res) => {
      //   if (res.success) {
      //     this.$set(this.dictOptions, 'projectFeeType', res.result)
      //   }
      // })
      initDictOptions('erp_omc_project,project_name,id').then((res) => {
        if (res.success) {
          this.$set(this.dictOptions, 'projectId', res.result)
        }
      })
      initDictOptions('erp_omc_contract_manager_final,htmc,id').then((res) => {
        if (res.success) {
          this.$set(this.dictOptions, 'projectContractId', res.result)
        }
      })
      initDictOptions('erp_purchase_contract,purchase_bill,id').then((res) => {
        if (res.success) {
          this.$set(this.dictOptions, 'contractId', res.result)
        }
      })
      // initDictOptions('erp_employee_file,name,id').then((res) => {
      //   if (res.success) {
      //     this.$set(this.dictOptions, 'projectUndertaker', res.result)
      //   }
      // })
    },
    addForm() {
      this.index = null
      this.showFormModal = true
      this.contentflag = this.model.isRelContract == '1' ? true : false
    },
    //切换公司
    selectApplicant(data) {
      if (data) {
        if (this.itemList) {
          this.itemList = []
          this.$set(this.model, 'payAmount', 0)
          this.$set(this.model, 'payeeBankName', null)
          this.$set(this.model, 'payeeAccountNo', null)
          this.$set(this.model, 'cnapsCode', null)
          this.$set(this.model, 'payeeName', null)
        }
      }
    },
    //切换团队
    selectTeam(data) {
			this.model.teamYear = data.tdnd
      if (data) {
        if (this.itemList) {
          this.itemList = []
          this.$set(this.model, 'payAmount', 0)
          this.$set(this.model, 'payeeBankName', null)
          this.$set(this.model, 'payeeAccountNo', null)
          this.$set(this.model, 'cnapsCode', null)
          this.$set(this.model, 'payeeName', null)
        }
      }
    },
	onJudge(){
		// 保存返回的监听，事先处理好
		uni.$on("supplierBack", res => {
			this.model.payeeName = res.id
			this.selectCustomer(res)
			
			// 清除监听
			uni.$off('supplierBack');
		})
	
		uni.navigateTo({
			url:'/pages/common/selectSupplier/selectSupplierInput'+'?isProPayContract=1&isNoJudge=1'
		})
	},
    //选择单位
    selectCustomer(data) {
      if (data) {
        this.$set(this.model, 'payeeBankName', data.bankName)
        this.$set(this.model, 'payeeAccountNo', data.bankAccountNo)
        this.$set(this.model, 'cnapsCode', data.cnapsCode)
      }
    },
    // 获取单据编号
    async initBillNo() {
      const res = await gainBillNo({ proposer: this.userInfo.empId })
      this.model.billNo = res.result
      this.model.bpmBizTitle = this.userInfo?.employee?.name + '-' + this.model.billNo //标题
    },
    // 初始化新增需要的数据
    initForm() {
      this.model.proposer = this.userInfo.empId //当前登录人
      this.model.proposerDeptId = this.userInfo.deptId //当前登录人部门
      this.model.createTime = moment().format('YYYY-MM-DD HH:mm:ss')
    },
    async initInfo() {
      const response = await info({ id: this.id })
      const data = response?.result || {}
      this.model = Object.assign({}, data)
      this.itemList = this.model.itemList
    },
    handleEditForm([item, index]) {
      this.basicForm = { ...item }
      this.index = index
      this.showFormModal = true
      this.contentflag = this.model.isRelContract == '1' ? true : false
    },
    handleRemoveForm(item) {
      this.itemList = this.itemList.filter((i) => i !== item)
      let payAmount = 0
      this.itemList.forEach((item) => {
        payAmount += item.currentPaidAmount.toFixed(2)
      })
      this.$set(this.model, 'payAmount', payAmount)
    },
    closeFormModal() {
      this.$refs.dataForm.reset()
      this.basicForm = {}
      this.index = null
    },
    openFormModal() {
      this.$refs.dataForm.basicForm = this.basicForm
    },
    handleFormSubmit([data, index]) {
      this.showFormModal = false
      if (typeof index === 'number') {
        this.$set(this.itemList, index, { ...data })
      } else {
        this.itemList.length = 0
        this.itemList.push(data)
      }
      this.dataSet()
      this.model.payAmount = data.currentPaidAmount
    },

    dataSet() {
      //判断合同或费用报销单的信息
      if (this.itemList.length > 0) {
        let obj = this.itemList[0]
        //项目合同
        if (obj.contractType == '1') {
          if (obj.contractId) {
            //获取对应的受托方信息
            queryProjectContractById({ mainId: obj.contractId, isSk: '1' }).then((res) => {
              if (res.success) {
                let result = res.result
                if (result) {
                  this.$set(this.model, 'payeeName', result[0].khdaId)
                  if (result[0].khdaId) {
                    queryPurchaseSupplierById({ id: result[0].khdaId }).then((res) => {
                      if (res.success) {
                        let result = res.result
                        if (result) {
                          this.$set(this.model, 'payeeBankName', result.bankName)
                          this.$set(this.model, 'payeeAccountNo', result.bankAccountNo)
                          this.$set(this.model, 'cnapsCode', result.cnapsCode)
                        }
                      }
                    })
                  }
                }
              }
            })
          } else {
            this.$set(this.model, 'payeeName', null)
            this.$set(this.model, 'payeeBankName', null)
            this.$set(this.model, 'payeeAccountNo', null)
            this.$set(this.model, 'cnapsCode', null)
          }
        } else if (obj.contractType == '2') {
          if (obj.contractId) {
            queryPurchaseContractById({ id: obj.contractId }).then((res) => {
              if (res.success) {
                let result = res.result
                if (result) {
                  this.$set(this.model, 'payeeName', result.supplyCompanName)
                  if (result.supplyCompanName) {
                    queryPurchaseSupplierById({ id: result.supplyCompanName }).then((res) => {
                      if (res.success) {
                        let result = res.result
                        if (result) {
                          this.$set(this.model, 'payeeBankName', result.bankName)
                          this.$set(this.model, 'payeeAccountNo', result.bankAccountNo)
                          this.$set(this.model, 'cnapsCode', result.cnapsCode)
                        }
                      }
                    })
                  }
                }
              }
            })
          } else {
            this.$set(this.model, 'payeeName', null)
            this.$set(this.model, 'payeeBankName', null)
            this.$set(this.model, 'payeeAccountNo', null)
            this.$set(this.model, 'cnapsCode', null)
          }
        } else {
          this.$set(this.model, 'payeeName', null)
          this.$set(this.model, 'payeeBankName', null)
          this.$set(this.model, 'payeeAccountNo', null)
          this.$set(this.model, 'cnapsCode', null)
        }
        //是否关联费用报销单
        if (obj.relReimbursementBillId) {
          queryRelReimbursementBillId({ id: obj.relReimbursementBillId }).then((res) => {
            if (res.success) {
              let result = res.result
              if (result) {
                //供应商
                if (result.transferType == '2') {
                  this.$set(this.model, 'payeeName', result.accountName)
                  this.$set(this.model, 'payeeBankName', result.bankName)
                  this.$set(this.model, 'payeeAccountNo', result.accountNo)
                  this.$set(this.model, 'cnapsCode', result.cnapsCode)
                }
              }
            }
          })
        }
      }
    },
    validateForm() {
      return this.$refs.form.validate().then(async () => {
        if (!this.itemList.length) {
          this.$u.toast('请添加费用信息!')
          return Promise.reject('请添加费用信息!')
        }
        if (!this.model.payMode) {
          this.$u.toast('请选择支付方式!')
          return Promise.reject('请选择支付方式!')
        }
        if (!this.model.payeeName) {
          this.$u.toast('请选择收款方!')
          return Promise.reject('请选择收款方!')
        }
        return Promise.resolve()
      })
    },
    getCreateTime() {
      let createTime = this.model.createTime
      let date = createTime.substring(0, 10)
      return date.substring(0, 4) + '年' + date.substring(5, 7) + '月' + date.substring(8, 10) + '日'
    },
    processPayment() {
      let payment = this.model.payAmount + ''
      let firstChar = payment.substring(0, 1)
      if (firstChar === '0') {
        payment = payment.substring(1, payment.length)
      }
      return payment
    },
    setBpmBizTitle() {
      let teamName = filterMultiDictText(this.dictOptions['teamId'], this.model.teamId + '')
      let createTime = this.getCreateTime()
      let payAmount = this.processPayment()
      this.model.bpmBizTitle = (teamName? teamName+ ' - ':'') + this.userInfo?.employee?.name + ' - ' + createTime + (this.model.payAmount? ' - ' + payAmount :'') //标题
    },
    async onSubmit() {
      await this.validateForm()
      this.isSubmit = true
      this.setBpmBizTitle()
      try {
        this.loading = true
        var url = ''
        if (this.id) {
          url = edit
        } else {
          url = add
        }
        this.model.itemList = this.itemList
        const response = await url({
          ...this.model,
        })
        if (response.success) {
          this.isSubmit = true
          if (this.id) {
            await this.getProcessList(this.id)
          } else {
            // 判断添加的时候是否有返回id值
            if (response.result) {
              await this.getProcessList(response.result)
            }
          }
          this.$refs.uToast.show({
            message: response.message,
            type: 'default',
            complete() {
              // that.isSubmit = false
            },
          })
        }
      } finally {
        this.loading = false
      }
    },
    async onDraft() {
      // await this.validateForm()
      this.isSubmit = true
      this.setBpmBizTitle()
      try {
        this.loading = true
        var url = ''
        if (this.id) {
          url = edit
        } else {
          url = add
        }
        this.model.itemList = this.itemList
        const response = await url({
          ...this.model,
        })
        if (response.success) {
          this.$refs.uToast.show({
            message: response.message,
            type: 'default',
            complete() {
              this.isSubmit = false
              if (getCurrentPages().length > 1) {
                uni.navigateBack()
              } else {
                uni.reLaunch({
                  url: '/pages/home/home',
                })
              }
            },
          })
        }
      } finally {
        this.loading = false
      }
    },
    // 获取流程列表
    getProcessList(id) {
      if (this.isSubmit) {
        this.$refs.processConfig.showPopup = true
        this.$refs.processConfig.formUrl = this.formUrl
        this.$refs.processConfig.formUrlMobile = this.formUrlMobile
        this.$refs.processConfig.flowCode = this.flowCode
        this.$refs.processConfig.edit(id, this.processId, this.beanName)
      }
    },
    // 提交流程成功
    onOk() {
      this.$refs.uToast.show({
        message: '提交成功',
        type: 'success',
        complete() {
          if (getCurrentPages().length > 1) {
            uni.navigateBack()
          } else {
            uni.reLaunch({
              url: '/pages/home/home',
            })
          }
        },
      })
    },
  },
  watch: {
    model: {
      handler(model) {
        this.contentflag = model.isRelContract == '1' ? true : false
      },
      deep: true,
    },
    'model.isRelContract'(current, old) {
      if (old && current && old !== current) {
        this.contentflag = current == '1' ? true : false
      }
    },
    // 'model.applicant'(current, old) {
    //   if (old && current && old !== current) {
    //     this.backUpApplyCompany = old
    //     // this.resetMetaData()
    //   }
    // },
    // 'model.teamId'(current, old) {
    //   if (old && current && old !== current) {
    //     this.backUpTeamId = old
    //     // this.resetMetaData()
    //   }
    // },
  },
}
</script>

<style scoped lang="scss">
@import url('@/assets/inputStyle.scss');
.trip-form-data {
  margin: 6px 0;
  ::v-deep {
    .u-form-item__body {
      padding-top: 2px;
      padding-bottom: 2px;
    }
  }
}
.checkbox-item {
  display: flex;
  align-items: center;
}
</style>
